<template>
  <div
    class="w-full h-full bg-page black:bg-page-dark relative overflow-y-auto overflow-x-hidden text-text-01 black:text-text-01-dark"
  >
    <div
      class="ai-f10-header fixed w-full py-2 top-0 z-10 bg-head black:bg-head-dark"
      :class="{ 'panel-show': showChatPanel }"
    >
      <div class="flex justify-between items-center w-[960px] my-0 mx-auto">
        <el-icon class="!text-text-01 black:!text-text-01-dark !w-28 !h-8">
          <AIF10Logo class="!w-28 !h-8" />
        </el-icon>
        <div v-if="!isClient" class="flex justify-center items-center gap-3">
          <span class="text-base font-semibold"
            >{{ stockInfo?.stock_name }} {{ stockInfo?.stock_code }}</span
          >
          <!-- <span>119.84 -0.17%</span> -->
        </div>
        <div class="flex justify-center items-center gap-2 text-sm">
          <div v-if="!isClient" class="flex justify-center items-center gap-2 text-sm">
            <span class="btn" @click="login" v-if="!loginStatusInJS">登录</span>
            <span class="max-w-20 truncate" v-else>{{ userInfo.uname }}</span>
            <span>|</span>
            <span class="btn" @click="register" v-if="!loginStatusInJS">注册</span>
            <span class="btn" @click="logout" v-else>退出</span>
          </div>

          <span @click="toggleDark()" class="cursor-pointer">换肤</span>
        </div>
      </div>
      <NavigationList class="mt-2 !w-[960px] mx-auto" />
    </div>
    <div
      class="main-container mx-auto my-0 h-full flex flex-col"
      :class="{ 'panel-show': showChatPanel }"
    >
      <PageContainer />
    </div>
    <DirectoryList class="fixed rounded z-20 max-h-full left-3 top-2/4 -translate-y-1/2" />
    <ChatPanel @showChatPanel="(show) => (showChatPanel = show)" />

    <!-- 运营位 -->
    <!-- 缩略状态 -->
    <transition name="slide-fade">
      <div
        class="fixed right-0 bottom-14 flex justify-center items-center gap-[6px] flex-col pt-[6px] pb-[8px] pr-[8px] pl-[14px] border-gradient rounded-r-none !border-r-0"
        v-show="!showChatPanel"
      >
        <span class="text-sm bg-tg bg-clip-text text-transparent">欢迎反馈</span>
        <img src="../../assets/feedback.png" class="w-16 h-16" alt="" srcset="" />
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import NavigationList from './components/NavigationList.vue'
import DirectoryList from './components/DirectoryList.vue'
import ChatPanel from './components/ChatPanel.vue'
import { AIF10Logo } from '@/components/icons'
import PageContainer from './components/PageContainer.vue'
import { ElMessageBox, type Action } from 'element-plus'
import { computed, ref, watch } from 'vue'
import { useDark, useToggle } from '@vueuse/core'
import { useAppInfoStore } from '@/stores/app'

const appStore = useAppInfoStore()

const userInfo = computed(() => window.loginIssue.getUser())

const loginStatusInJS = computed(() => window.loginIssue.isLogin())

const stockInfo = computed(() => appStore.appInfo?.stock)

const showChatPanel = ref(false)

const isDark = useDark()
const toggleDark = useToggle(isDark)

const skin = computed(() => (isDark.value ? 'dark' : 'light'))

const isClient = computed(() => appStore.isClient())

appStore.setSkin(skin.value)
watch(skin, (val) => {
  appStore.setSkin(val)
})

function login() {
  window.location.href = `https://upass.10jqka.com.cn/login?redir=${location.href}`
}

function register() {
  window.open('https://upass.10jqka.com.cn/register')
}

function logout() {
  ElMessageBox.confirm('退出登录后将不能使用AI-F10功能，确定退出？', '退出登录', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    callback: (action: Action) => {
      console.log(action)
      if (action === 'confirm') {
        window.loginIssue.logOut(location.href)
      }
    }
  })
}
</script>
<style lang="less" scoped>
.btn {
  @apply cursor-pointer hover:text-text-04;
}
.ai-f10-header {
  &.panel-show {
    width: calc(100% - 290px);
  }
}
.main-container {
  width: calc(100% - 100vw + 960px);
  &.panel-show {
    width: calc(100% - 100vw + 960px + 290px);
  }
}

.ai-f10-header,
.main-container {
  transition: width 0.3s;
}
</style>
